<template>
  <div class="sub-info none">
    <div class="sub-info-title">
      <div>
        <span>教育经历</span>
        <span @click="addAction" class="add-style" v-if="id != -1 && id">+</span>
      </div>

      <div>
        <el-button :disabled="id == -1 || !id" @click="deleteAction" plain class="delete-btn">删除
        </el-button>
        <el-button :disabled="id == -1 || !id" type="primary" @click="handleClick(edit)">
          {{edit ? '保存' : '编辑'}}
        </el-button>
      </div>
    </div>
    <el-form :rules="rules" label-position="left" ref="form" :model="form" label-width="80px" class="resume-form">
      <el-row>
        <el-col :span="12">
          <el-form-item label="毕业院校" prop="school">
            <el-input placeholder="请输入毕业院校" v-model="form.school" :disabled="!edit" clearable>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="学历" prop="education">
            <el-select v-model="form.education" placeholder="请选择学历" :disabled="!edit" clearable
              @change="function(val){selectChange(val,'education')}">
              <el-option v-if="selectItems.educationList && selectItems.educationList.length"
                v-for="(v,i) in selectItems.educationList" :key="i" :label="v.name" :value="v.val">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="专业类别" prop="majorCategory">
            <el-cascader @change="function(val){selectChange(val,'majorCategory')}" :props="props"
              v-model="form.majorCategory" :options="selectItems.majorCategoryList" :disabled="!edit" clearable
              placeholder="请选择专业类别">
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所学专业" prop="major">
            <el-input placeholder="请输入所学专业" v-model="form.major" :disabled="!edit" clearable>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <div class="small-input">
            <el-form-item label="时间" prop="startTime">
              <el-date-picker :picker-options="pickerOptions1" value-format="yyyy-MM-dd HH:mm:ss" :disabled="!edit"
                prefix-icon="" v-model="form.startTime" type="date" placeholder="请选择">
              </el-date-picker>
              <span class="bar">-</span>
            </el-form-item>

            <el-form-item label="" prop="endTime" label-width="0">
              <el-date-picker :picker-options="pickerOptions2" :required="isHaveTo" value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="form.toDay || !edit" prefix-icon="" v-model="form.endTime" type="date" placeholder="请选择">
              </el-date-picker>
              <el-checkbox v-model="form.toDay" class="check-style" :disabled="!edit">至今</el-checkbox>
            </el-form-item>
          </div>
        </el-col>
        <el-col :span="12"></el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
export default {
  components: {

  },
  props: ['eduForms', 'index', 'selectItems', 'id'],
  data () {
    let validateName = (rule, value, callback) => {
      if (!value && this.isHaveTo) {
        callback(new Error("请输入结束日期"));
      } else {
        callback();
      }
    }
    return {
      props: {
        value: "code",
        label: "name",
        children: "childVo"
      },
      pickerOptions1: {},
      pickerOptions2: {},
      toDay: false,
      edit: false,
      options: [],
      form: {
        id: '',
        school: '',
        education: '',
        majorCategory: [],
        major: '',
        startTime: '',
        endTime: '',
        toDay: false
      },
      rules: {
        school: [
          { required: true, message: '请选择毕业院校', trigger: 'blur' },
          { max: 20, message: '最多输入20字', trigger: 'blur' }
        ],
        education: [
          { required: true, message: '请选择学历 ', trigger: 'blur' }
        ],
        majorCategory: [
          { required: true, message: '请选择专业类别', trigger: 'blur' }
        ],
        major: [
          { required: true, message: '请输入所学专业', trigger: 'blur' },
          { max: 20, message: '最多输入20字', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '请选择开始日期', trigger: 'blur' }
        ],
        endTime: [
          { validator: validateName, trigger: 'blur' },
        ]
      }
    };
  },
  methods: {
    selectChange (val, name) {
      if (val) {
        let _field = this.$refs['form'].fields
        _field.map(i => {
          if (i.prop === name) {
            i.clearValidate()
          }
        })
      }
    },
    handleClick (edit) {
      if (edit) {
        this.$refs['form'].validate((valid) => {
          if (valid) {
            let temp = JSON.parse(JSON.stringify(this.form));
            temp.majorCategory = JSON.stringify(this.form.majorCategory);
            this.id ? temp.resumeId = this.id : '';
            this.$emit('updateResume', temp, 2, this.index)
            this.edit = !this.edit;
          } else {
            return false;
          }
        });
      } else {
        this.edit = !this.edit;
      }

    },
    addAction () {
      this.$emit('addItem', this.index, 2)
    },
    deleteAction () {
      this.$emit('deleteItem', this.index, 2, this.form);
    }
  },
  watch: {
    'eduForms.length': {
      handler (newValue, oldValue) {
        this.form = { ...this.form, ...this.eduForms[this.index] };
      }
    },
    'form.toDay': function (val) {
      if (val) {
        let _field = this.$refs['form'].fields
        _field.map(i => {
          if (i.prop === 'endTime') {
            this.form.endTime = ""
            i.clearValidate()
          }
        })
      } else {
        let _field = this.$refs['form'].fields
        _field.map(i => {
          if (i.prop === 'endTime') {
            i.validate()
          }
        })
      }
    },
    eduForms: {
      handler (newName, oldName) {
        console.log(this.eduForms, newName);

        this.form = { ...this.form, ...newName[this.index] };
        console.log(this.form);

      },
      immediate: true
    },
  },
  computed: {
    isHaveTo () {
      return !this.form.toDay;
    }
  },
  created () {
    this.form = { ...this.form, ...this.eduForms[this.index] };
    this.pickerOptions1.disabledDate = (time) => {
      if (this.form.endTime) {
        return time.getTime() > new Date(this.form.endTime) || time.getTime() > Date.now();
      } else {
        return time.getTime() > Date.now()
      }

    }
    this.pickerOptions2.disabledDate = (time) => {
      if (this.form.startTime) {
        return time.getTime() < new Date(this.form.startTime) || time.getTime() > Date.now();
      } else {
        return time.getTime() > Date.now();
      }
    }
    if (typeof (this.form.majorCategory) == 'string') {
      this.form.majorCategory = JSON.parse(this.form.majorCategory);
    }

  }
};
</script>
<style lang="css" scoped>
.sub-info {
    background: #ffffff;
}
.sub-info-title {
    display: flex;
    justify-content: space-between;
    padding: 0 44px;
    background: #ffffff;
    height: 62px;
    align-items: center;
}
.sub-info-title div {
    width: 160px;
    display: flex;
}
.sub-info-title span:first-child:after {
    width: 28px;
    height: 2px;
    background: #1893fc;
    content: '';
    display: block;
    margin-top: 3px;
}
.sub-info-title .el-button {
    padding: 0;
    width: 94px;
    height: 24px;
    line-height: 24px;
    box-sizing: border-box;
    background: #1893fc;
}
.sub-info-title .delete-btn {
    background: #ffffff;
    border-color: #1893fc;
    color: #1893fc;
}
.resume-form {
    padding: 0 58px;
}
.el-row > .el-col-12:last-child {
    display: flex;
    justify-content: flex-end;
}
.bar {
    padding-left: 10px;
}
.add-style {
    color: #ffffff;
    width: 13px;
    height: 13px;
    background: #1893fc;
    text-align: center;
    line-height: 13px;
    border-radius: 50%;
    margin-left: 14px;
    margin-top: 5px;
    cursor: pointer;
}
</style>
